<script setup lang="ts">
import { ref, createVNode, h } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
interface Props {
  cardInfo: {
    id: number;
    pu_order_screenshot: string;
    pu_title: string;
    pu_description: string;
    pu_tip: number | undefined;
  };
  mobile: string | number
}

const props = defineProps<Props>();

// const emits = defineEmits(["gotoDetail"]);
const formartImg = (imglist: string | undefined): any => {
 
  
  if (imglist === undefined) {
    return ""
  }
  var imglist1 = imglist.split(",");
  return imglist1[0];
};

const gotoDetail = (id: number) => {
  //   emits("gotoDetail", id);
  router.push({ path: "/detail", query: { id: id, mobile: props.mobile ? props.mobile : 0 } });
};
</script>

<template>
  <div class="col-sm-3 card_3">
    <div class="card my-3 card_box" @click="gotoDetail(props.cardInfo.id)" style="overflow: hidden;">
      <div
        style="width: 100%; height: 210px; overflow: hidden; display: flex; justify-content: center;align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.175);">
        <a-image :src="formartImg(props.cardInfo.pu_order_screenshot)" style="border-bottom: 1px solid #212529"
          :previewMask="false" />
      </div>

      <div class="card-body">
        <h5 class="card-title card_title">{{ props.cardInfo.pu_title }}</h5>
        <p class="card-text card_text">
          {{ props.cardInfo.pu_description || "没有描述信息哦~~" }}
        </p>
      </div>
      <div class="card-footer">
        <span class="text-body-secondary">茶水费
          <span style="color: red; font-weight: 700">￥{{ props.cardInfo.pu_tip || '暂无' }}</span></span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.card_title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card_text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 48px;
}

.card_box:hover {
  cursor: pointer;
  transition: all .4s;

  @media (min-width: 768px) {
    transform: translateY(-10px);
    /* box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.5); */
  }

}
</style>

